<!-- @format -->

<template>
    <div class="ma-content-block  p-4" style="height: 88vh">
		<div style="display:flex;justify-content: space-between;align-items: center;margin-bottom:1%">
            <div style='font-size:24px'>{{newYear}}年{{newMonth}}月{{newDay}}日</div>
            <div style="display:flex;">
                <div >
                    <a-range-picker
                        @change="onChange($event)"
                        style="width: 300px;"
                    />
                    
                </div>
                <div style="margin-left:24px"  v-auth="['prediction:Tz:exprot']">
                    <a-button type="primary"   @click='handleExports'>导出台账报表</a-button>
                </div>
            </div>
        </div>
        <!-- <div class='flex' style='justify-content: space-between;align-items: center;margin-bottom:1%'>
            <div style="display:flex;">
                <div style="margin-right:4%" v-for='(item,index) in sbData' :key='index'>
                    <a-button :type="sbKey == item.key?'primary':'secondary'" shape="round" @click='handleTab(item.key)'>{{item.title}}</a-button>
                </div>
            </div>
            <div style="display:flex;">
                <div style="margin-left:12px"  v-auth="['prediction:Tz:exprot']">
                    <a-button type="primary"  size="large" @click='handleExports'>导出台账报表</a-button>
                </div>
                <div style="margin-left:12px"  v-auth="['prediction:Tz:exprot']">
                    <a-button type="primary"  size="large" @click='handleReport'>运营报表</a-button>
                </div>
                <div style="margin-left:12px"  v-auth="['prediction:Tz:exprot']">
                    <a-button type="primary" size="large" @click="handleExport($event,5)">运营结算明细</a-button>
                </div> 
            </div>
        
        </div> -->
        <a-tabs @change="handletab">
            <a-tab-pane key="1">
                <template #title> <icon-calendar /> 卸车 </template>
                <div class='tableBox' v-dragscroll style="height: 80%;overflow:auto;" >
                    <div class=" flex flex_column flex_1" style="height: fit-content;width:fit-content;">
                        <div class="flexbox  bor_btm" style="background: rgba(242, 243, 245, 1);height:50px;position:sticky;top:0;background:rgba(242, 243, 245, 1);z-index:99">
                            <div style="font-size: 20px; font-weight: 600">
                               威 斯 腾 专 用 线 装 卸 作 业 报 表
                            </div>
                        </div>
                        <div class="flex" style="background: rgba(242, 243, 245, 1); font-weight: 600;position:sticky;top:50px;background:rgba(242, 243, 245, 1);z-index:99">
                            <div class=" flexbox bor_right bor_btm" style='width:300px;position:sticky;left:0;background:rgba(242, 243, 245, 1);'>
                                <div class='pad8'>日期</div>
                            </div>
                            <div class="flex" :style='{"width":taizhangData.type_list.length == 0?"1200px":(taizhangData.type_list.length * 200 * 3) + "px"}'>
                                <div class='flex_1 flex flex_column'>
                                    <div class=" flexbox bor_right bor_btm flex_1" >
                                        <div class='pad8'>专用线卸车</div>
                                    </div>
                                    <div class='flex ' v-if='taizhangData.type_list.length != 0'>
                                        <div class='flex_1' v-for='(item,index) in taizhangData.type_list' :key='index'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>{{item.name}}</div>
                                            </div>
                                            <div class='flex'>
                                                <div class='flex_1'>
                                                    <div class=" flexbox bor_right bor_btm" >
                                                        <div class='pad8'>车数</div>
                                                    </div>
                                                </div>
                                                <div class='flex_1'>
                                                    <div class=" flexbox bor_right bor_btm" >
                                                        <div class='pad8'>吨位</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    
                                    </div>
                                </div>
                                <div class='flex_1 flex flex_column'>
                                    <div class=" flexbox bor_right bor_btm flex_1" >
                                        <div class='pad8'>分流卸车</div>
                                    </div>
                                    <div class='flex ' v-if='taizhangData.type_list.length != 0'>
                                        <div class='flex_1' v-for='(item,index) in taizhangData.type_list' :key='index'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>{{item.name}}</div>
                                            </div>
                                            <div class='flex'>
                                                <div class='flex_1'>
                                                    <div class=" flexbox bor_right bor_btm" >
                                                        <div class='pad8'>车数</div>
                                                    </div>
                                                </div>
                                                <div class='flex_1'>
                                                    <div class=" flexbox bor_right bor_btm" >
                                                        <div class='pad8'>吨位</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    
                                    </div>
                                </div>
                                <div class='flex_1 flex flex_column'>
                                    <div class=" flexbox bor_right bor_btm flex_1" >
                                        <div class='pad8'>汽车卸车</div>
                                    </div>
                                    <div class='flex ' v-if='taizhangData.type_list.length != 0'>
                                        <div class='flex_1' v-for='(item,index) in taizhangData.type_list' :key='index'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>{{item.name}}</div>
                                            </div>
                                            <div class='flex'>
                                                <div class='flex_1'>
                                                    <div class=" flexbox bor_right bor_btm" >
                                                        <div class='pad8'>车数</div>
                                                    </div>
                                                </div>
                                                <div class='flex_1'>
                                                    <div class=" flexbox bor_right bor_btm" >
                                                        <div class='pad8'>吨位</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    
                                    </div>
                                </div>
                            </div>
                            <div class=" flexbox bor_right bor_btm" style='width:100px'>
                                <div class='pad8'>装车数（回送空箱）</div>
                            </div>
                            <div class="flex flex_column " :style='{"width":taizhangData.type_list.length == 0?"200px":(taizhangData.type_list.length * 100) + "px"}'>
                                <div class=" flexbox bor_right bor_btm flex_1" >
                                    <div class='pad8'>提货装车（重量：吨）</div>
                                </div>
                                <div class='flex flex_1' v-if='taizhangData.type_list.length != 0'>
                                    <div class='flex_1' v-for='(item,index) in taizhangData.type_list' :key='index'>
                                        <div class=" flexbox bor_right bor_btm" style='height:100%'>
                                            <div>{{item.name}}</div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                            <div class=" flexbox  bor_btm" style='width:100px;'>
                                <div class='pad8'>基础物流收入（万元）</div>
                            </div>
                        </div>
                        <div class="flex_1 scrollbar"  v-if='!loading'>
                            <div class='flex' v-for='(item,index) in taizhangData.zyx_list' :key='index' >
                                <div class="flexbox bor_right bor_btm" style='width:300px;position:sticky;left:0;background:rgba(242, 243, 245, 1);'>
                                    <div class='pad8'>{{item.date}}</div>
                                </div>
                                <template v-for='(ites,inds) in xieList' :key='inds'>
                                    <template v-for='(ite,ind) in taizhangData.type_list' :key='ind'>
                                        <div class=" flex height40" style="width: 100px">
                                            <div class="flexbox bor_btm bor_right" style="width: 100px">
                                                <div class="pad8">{{item[ites.item + 'count_' + ind]}}</div>
                                            </div>
                                        </div>
                                        <div class=" flex height40" style="width: 100px">
                                            <div class="flexbox bor_btm bor_right" style="width: 100px">
                                                <div class="pad8">{{item[ites.item + 'weight_' + ind]}}</div>
                                            </div>
                                        </div>
                                    </template>
                                </template>
                                
                                
                                <div class=" flex height40" style="width: 100px">
                                    <div class="flexbox bor_btm bor_right" style="width: 100px">
                                        <div class="pad8">{{item?.hx_box_count}}</div>
                                    </div>
                                </div>
                                <template v-for='(ite,ind) in taizhangData.type_list' :key='ind'>
                                    <div class=" flex height40" style="width: 100px">
                                        <div class="flexbox bor_btm bor_right" style="width: 100px">
                                            <div class="pad8">{{item['th_now_weight_' + ind]}}</div>
                                        </div>
                                    </div>
                                </template>
                                <div class=" flex height40" style="width:100px;">
                                    <div class="flexbox bor_btm bor_right" style="width:100px;">
                                        <div class="pad8"></div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <div class='flexbox' style='width:100%;height:100%' v-else>
                            <div >暂无数据</div>
                        </div>
                        
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2">
                <template #title> <icon-calendar /> 实时库存 </template>
                <div class='tableBox' v-dragscroll style="height: 80%;overflow:auto" >
                    <div class=" flex flex_column flex_1" style="height: 100%;">
                        <div class="flexbox  bor_btm" style="background: rgba(242, 243, 245, 1);height:50px">
                            <div style="font-size: 20px; font-weight: 600">
                                实时库存（暂存+仓储）（重量：吨）
                            </div>
                        </div>
                        <div class="flex_1 scrollbar" style="overflow: auto">
                            <div v-if='!loading'>
                                <!-- 重箱区 -->
                                <div>
                                    <div class='flex' v-for='(item,index) in taizhangData.zc_list' :key='index'>
                                        <div class=" flex height40 flex_1 bor_btm bor_right" >
                                            <div class="flexbox flex_1" >
                                                <div class="pad8">{{item.dept_name}}</div>
                                            </div>
                                        </div>
                                        <div class=" flex height40 flex_1 bor_btm bor_right"  v-for='(ite,ind) in taizhangData?.type_list' :key='ind'>
                                            <div class="flexbox flex_1" >
                                                <div class="pad8">{{item['type_' + (ind + 1)]}}</div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    <div class='flex' >
                                        <div class=" flex height40  bor_btm bor_right" :style='{width:( 1 / (taizhangData.type_list.length + 1) * 100) + "%"}'>
                                            <div class="flexbox flex_1" >
                                                <div class="pad8">合计</div>
                                            </div>
                                        </div>
                                        <div class=" flex height40 flex_1 bor_btm bor_right" >
                                            <div class="flexbox flex_1" >
                                                <div class="pad8">{{zc_heji.type_1}}</div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                            <div class='flexbox' style='width:100%;height:100%' v-else>
                                <div >暂无数据</div>
                            </div>
                        
                        </div>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="3">
                <template #title> <icon-calendar /> 场地集装箱 </template>
                <div class='tableBox' v-dragscroll style="height: 80%;overflow:auto" >
                    <div class=" flex flex_column flex_1" style="height: fit-content;width:fit-content;">
                        <div class="flexbox  bor_btm" style="background: rgba(242, 243, 245, 1);height:50px;position:sticky;top:0;background:rgba(242, 243, 245, 1);z-index:99">
                            <div style="font-size: 20px; font-weight: 600">
                                场地集装箱总保有量（箱）
                            </div>
                        </div>
                        <div class="flex_1 scrollbar" v-if='!loading' >
                            <!-- 场地集装箱总保有量（箱） -->
                            <div class='flex flex_column' style='width: fit-content;'>
                                <div class='flex'  style='position:sticky;top:50px;background:rgba(242, 243, 245, 1);z-index:99'>
                                    <div class="flexbox bor_btm bor_right" style="width:300px;position:sticky;left:0px;background:rgba(242, 243, 245, 1);z-index:99">
                                        <div class="pad8"></div>
                                    </div>
                                    <div class="flexbox bor_btm bor_right height40" style="width: 200px;position:sticky;left:300px;background:rgba(242, 243, 245, 1);z-index:99">
                                        <div class="pad8">集装箱名称/公司名称</div>
                                    </div>
                                    <div class=" flex height40" style="width: 100px" v-for='(item,index) in taizhangData.dept_list' :key='index'>
                                        <div class="flexbox bor_btm bor_right" style="width: 100px">
                                            <div class="pad8">{{item.name}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class='flex'  >
                                    <div class="flexbox bor_btm bor_right height40" style="width:300px;position:sticky;left:0px;background:#fff;z-index:66">
                                        <div class="pad8">重箱总保有量（箱）（仅统计在园区的）</div>
                                    </div>
                                    <div class="" >
                                        <div v-for='(item,index) in taizhangData.zx_box_list' :key='index' class='flex'>
                                            <div class="flexbox bor_btm bor_right height40" style="width: 200px;position:sticky;left:300px;background:#fff;z-index:66">
                                                <div class="pad8">{{item.box_type}}</div>
                                            </div>
                                            <div class=" flex height40" style="width: 100px" v-for='(ite,ind) in taizhangData.dept_list' :key='ind'>
                                                <div class="flexbox bor_btm bor_right" style="width: 100px">
                                                    <div class="pad8">{{item['dept_' + (ind + 1)]}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flexbox bor_btm bor_right" >
                                            <div class="pad8">合计：{{zx_heji.dept_1}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class='flex'  >
                                    <div class="flexbox bor_btm bor_right height40" style="width:300px;position:sticky;left:0px;background:#fff;z-index:66">
                                        <div class="pad8">重箱待还保有量（箱）（客户提走未归还给园区的）</div>
                                    </div>
                                    <div class="" >
                                        <div v-for='(item,index) in taizhangData.dh_box_list' :key='index' class='flex'>
                                            <div class="flexbox bor_btm bor_right height40" style="width: 200px;position:sticky;left:300px;background:#fff;z-index:66">
                                                <div class="pad8">{{item.box_type}}</div>
                                            </div>
                                            <div class=" flex height40" style="width: 100px" v-for='(ite,ind) in taizhangData.dept_list' :key='ind'>
                                                <div class="flexbox bor_btm bor_right" style="width: 100px">
                                                    <div class="pad8">{{item['dept_' + (ind + 1)]}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flexbox bor_btm bor_right" >
                                            <div class="pad8">合计：{{dh_heji.dept_1}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class='flex'  >
                                    <div class="flexbox bor_btm bor_right height40" style="width:300px;position:sticky;left:0px;background:#fff;z-index:66">
                                        <div class="pad8">空箱（箱）（存放在园区的空箱）</div>
                                    </div>
                                    <div class="" >
                                        <div v-for='(item,index) in taizhangData.kx_box_list' :key='index' class='flex'>
                                            <div class="flexbox bor_btm bor_right height40" style="width: 200px;position:sticky;left:300px;background:#fff;z-index:66">
                                                <div class="pad8">{{item.box_type}}</div>
                                            </div>
                                            <div class=" flex height40" style="width: 100px" v-for='(ite,ind) in taizhangData.dept_list' :key='ind'>
                                                <div class="flexbox bor_btm bor_right" style="width: 100px">
                                                    <div class="pad8">{{item['dept_' + (ind + 1)]}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flexbox bor_btm bor_right" >
                                            <div class="pad8">合计：{{kx_heji.dept_1}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flexbox bor_btm bor_right" >
                                    <div class="pad8">合计：{{(kx_heji.dept_1 - 0) + (zx_heji.dept_1 - 0) + (dh_heji.dept_1 - 0)}}</div>
                                </div>
                            </div>
                        </div>
                        <div class='flexbox' style='width:100%;height:100%' v-else>
                            <div >暂无数据</div>
                        </div>
                        
                    </div>
                </div> 
            </a-tab-pane>
        </a-tabs>

        
            
        
        <div style="padding-bottom: 2%"></div>
        <!-- 加载中... -->
        <div
            v-if="loading"
            style="
            position: fixed;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            display: flex;
            top: 0;
            left: 0;
            justify-content: center;
            align-items: center;
            "
        >
            <a-spin dot :size="10" />
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { request } from "@/utils/request.js";
import { Message } from "@arco-design/web-vue";
import { Notification } from "@arco-design/web-vue";
import {dateFormat} from '@/utils/util.js'
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
import { ElMapExportTable } from "table-excel";
import tool from "@/utils/tool";
import * as common from "@/utils/common";
import commonApi from "@/api/common";
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const sbData = ref([
    {title:'卸车',key:1},
    {title:'实时库存',key:2},
    {title:'场地集装箱',key:3},
])
const sbKey = ref(1)
  const range_dates = ref([])
  const zc_heji = ref({})
  const zx_heji = ref({})
  const kx_heji = ref({})
  const dh_heji = ref({})
  const exportDatas = ref({})
  const exportColumn = ref([])
  const exportData = ref([])
  const maxIndex = ref(0)    // 最大索引
  const taizhangData = ref({
    dept_list:[],
    dh_box_list:[],
    kx_box_list:[],
    type_list:[],
    zc_list:[],
    zx_box_list:[],
    zyx_list:[],
  })
  const xieList = ref([
    {item:'zyx_now_',title:'专用线'},
    {item:'fl_now_',title:'分流'},
    {item:'qiche_now_',title:'汽车'},
  ])
  const newDate = new Date();
  // 当天
  const newDay = newDate.getDate();  
  // 当年
  const newYear = newDate.getFullYear();
  // 当月
  const newMonth = (newDate.getMonth() + 1)>9?(newDate.getMonth() + 1):'0' + (newDate.getMonth() + 1);
  // 本月天数
  const newMaxDay = new Date(newYear, newMonth, 0).getDate();
  onMounted(() => {

      let range_date = [`${newYear}-${newMonth}-${newDay} 00:00:00`,`${newYear}-${newMonth}-${newDay} 23:59:59`]
      handleExportData(range_date)
  });
  const handleTab = (e)=>{
    sbKey.value = e
  }
  const handleExportData = (range_date) =>{
        loading.value = true
        request({    //  获取公司列表
            url: 'prediction/Tz/index',
            method: 'get',
            params:{
                range_date
            },
        }).then((res) => {
            exportDatas.value = JSON.parse(JSON.stringify(res.data))
            taizhangData.value = res.data
            zc_heji.value = res.data.zc_list.pop();
            zx_heji.value = res.data.zx_box_list.pop();
            kx_heji.value = res.data.kx_box_list.pop();
            dh_heji.value = res.data.dh_box_list.pop();
            res.data.zx_box_list.shift()
            res.data.dh_box_list.shift()
            res.data.kx_box_list.shift()

            // 导出表格处理数据-有病的导出
            // 判断定义最长的表格是多少
            let changIndex = 0
            let arrKey = [];
            if(((res.data.type_list.length * 2 * 3) + res.data.type_list.length + 3) > (res.data.dept_list.length + 2)){
                changIndex = (res.data.type_list.length * 2 * 3) + res.data.type_list.length + 3
            }else{
                changIndex = res.data.dept_list.length + 2
            }
            let exportColumns = [
                {title:'威斯腾专用线装卸作业报表',children:[
                    {title:'日期',dataIndex:''},
                    {title:'专用线卸车',children:[]},
                    {title:'分流卸车',children:[]},
                    {title:'汽车卸车',children:[]},
                    {title:'装车（送回空箱）',dataIndex:''},
                    {title:'提货装车（重量：吨）',children:[]},
                    {title:'基础物流收入（万元）',dataIndex:''},
                ]}
            ]
            for(let i=0;i < changIndex;i++){
                arrKey.push('value' + i)
                if(changIndex > (res.data.type_list.length * 2 * 3) + res.data.type_list.length + 3 && i > (res.data.type_list.length * 2 * 3) + res.data.type_list.length + 2){
                    exportColumns[0].children.push({title:'',dataIndex:'value' + i})
                }   
            }
            maxIndex.value = changIndex
            // 开始拼数据-卸车数据拼入表格
            let xiecheData = []
            let zylList = []   // 专用线KEY
            let flList = []   // 分流线Key
            let qicheList = []  // 汽车KEY
            let thList = []  // 提货KEY
            res.data.type_list.map((v,i)=>{
                zylList.push(`zyx_now_count_${i}`,`zyx_now_weight_${i}`)
                flList.push(`fl_now_count_${i}`,`fl_now_weight_${i}`)
                qicheList.push(`qiche_now_count_${i}`,`qiche_now_weight_${i}`)
                thList.push(`th_now_weight_${i}`)
                exportColumns[0].children[1].children.push({title:v.name,children:[{title:'车数',dataIndex:`value${(2 * i) + 1}`},{title:'吨数',dataIndex:`value${(2 *i) + 2}`}]})
                exportColumns[0].children[2].children.push({title:v.name,children:[{title:'车数',dataIndex:`value${(res.data.type_list.length * 2) + (2 * i) + 1}`},{title:'吨数',dataIndex:`value${(res.data.type_list.length * 2) + (2 * i) + 2}`}]})
                exportColumns[0].children[3].children.push({title:v.name,children:[{title:'车数',dataIndex:`value${(res.data.type_list.length * 4) + (2 * i) + 1}`},{title:'吨数',dataIndex:`value${(res.data.type_list.length * 4) + (2 * i) + 2}`}]})
                exportColumns[0].children[5].children.push({title:v.name,dataIndex:`value${(res.data.type_list.length * 6) + (2 * i) + 2}`})
            })
            // 月计划
            res.data.zyx_list.map((v,i)=>{
                let itemObj = {}
                arrKey.map((vv,ii)=>{
                    if(ii == 0){
                        itemObj[vv] = v.date || ''
                        exportColumns[0].children[0].dataIndex = vv
                    }else if(ii > 0 && ii <= (res.data.type_list.length * 2)){
                        zylList.map((vvv,iii)=>{
                            if((ii - 1) == iii){
                                itemObj[vv] = v[vvv]
                            }
                        })

                    }else if(ii > (res.data.type_list.length * 2) && ii <= (res.data.type_list.length * 4)){
                        flList.map((vvv,iii)=>{
                            if((ii - 1 - res.data.type_list.length * 2) == iii ){
                                itemObj[vv] = v[vvv] 
                            }
                            
                        })
                       
                    }else if(ii > (res.data.type_list.length * 4) && ii <= (res.data.type_list.length * 6)){
                        qicheList.map((vvv,iii)=>{
                            if((ii - 1 - res.data.type_list.length * 4) == iii){
                                itemObj[vv] = v[vvv] 
                            }
                            
                        })
                        
                    }else if(ii == (res.data.type_list.length * 6) + 1){
                        itemObj[vv] = v.hx_box_count || '0'
                        exportColumns[0].children[4].dataIndex = vv
                    }else if(ii > (res.data.type_list.length * 6) + 1 && ii <= (res.data.type_list.length * 7) + 1){
                        thList.map((vvv,iii)=>{
                            if((ii - res.data.type_list.length * 6 - 2) == iii){
                                itemObj[vv] = v[vvv] 
                                exportColumns[0].children[5].children[iii].dataIndex = vv
                            }
                        })
                    }else{
                        itemObj[vv] = ''
                    }
                })
                xiecheData.push(itemObj)
            })
            // 周计划
            let weekData = {}
            weekData = JSON.parse(JSON.stringify(res.data.zyx_list[0]))
            let weekDataarr = Object.keys(weekData)
            weekDataarr.map((v,i)=>{
                if(v == 'date'){
                    weekData[v] = `分公司${range_date[0].split(' ')[0].split('-')[1]}月周分批计划`
                }else{
                    weekData[v] = ''
                }
            })
            res.data.zyx_list.unshift(JSON.parse(JSON.stringify(weekData)))
            // 月计划
            let yearData = JSON.parse(JSON.stringify(weekData))
            yearData['date'] = `分公司${range_date[0].split(' ')[0].split('-')[1]}月计划`
            res.data.zyx_list.unshift(JSON.parse(JSON.stringify(yearData)))
            let itemObj = {}
            let itemObjs = {}
            arrKey.map((v,i)=>{
                itemObj[v] = ''
                itemObjs[v] = ''
            })
            // 月计划 周计划
            xiecheData.unshift(JSON.parse(JSON.stringify(itemObjs)),JSON.parse(JSON.stringify(itemObjs)))

            xiecheData[0].value0 = `分公司${range_date[0].split(' ')[0].split('-')[1]}月计划`
            xiecheData[1].value0 = `分公司${range_date[0].split(' ')[0].split('-')[1]}月周分批计划`
            xiecheData.push(JSON.parse(JSON.stringify(itemObjs)))    // 添加空格
            // 实时库存数据拼装
            xiecheData.push(JSON.parse(JSON.stringify(itemObj)))
            xiecheData[xiecheData.length - 1].value0 = '实时库存（暂存+仓储）（重量：吨）'
            let shishiData = []
            res.data.zc_list.map((v,i)=>{
                let objItems = {}
                arrKey.map((vv,ii)=>{
                    objItems[vv] = ''
                })
                objItems.value0 = v.dept_name
                res.data.type_list.map((vv,ii)=>{
                    objItems['value' + (ii + 1)] = v['type_' + (ii + 1)]
                })
                shishiData.push(objItems)
            })
            shishiData.push(JSON.parse(JSON.stringify(itemObj)))
            shishiData[shishiData.length - 1].value0 = '合计'
            shishiData[shishiData.length - 1].value1 = zc_heji.value.type_1
            shishiData.push(JSON.parse(JSON.stringify(itemObjs)))    // 添加空格
            shishiData.push(JSON.parse(JSON.stringify(itemObj)))
            shishiData[shishiData.length - 1].value0 = '场地集装箱总保有量（箱）'

            // 重箱数据拼接
            let zxDataList = []
            let zxList = ['','集装箱名称/公司名称']
            res.data.dept_list.map((v,i)=>{
                zxList.push(v.name)
            })
            let zxobjItem = {}
            arrKey.map((v,i)=>{
                if(i < zxList.length){
                    zxobjItem[v] = zxList[i]
                }else{
                    zxobjItem[v] = ''
                }
                
            })
            shishiData.push(zxobjItem)
            res.data.zx_box_list.map((v,i)=>{
                let zxItem = {}
                arrKey.map((vv,ii)=>{
                    if(ii == 0){
                        zxItem[vv] = '重箱总保有量（箱）（仅统计在园区的）'
                    }else if(ii == 1){
                        zxItem[vv] = v.box_type
                    }else if(ii < res.data.dept_list.length + 2){
                        zxItem[vv] = v['dept_' + (ii - 1)]
                    }else{
                        zxItem[vv] = ''
                    }
                })
                zxDataList.push(zxItem)
            })
            zxDataList.push(JSON.parse(JSON.stringify(itemObjs)))
            zxDataList[zxDataList.length - 1].value0 = '重箱总保有量（箱）（仅统计在园区的）'
            zxDataList[zxDataList.length - 1].value1 = '合计：' + zx_heji.value.dept_1
            // 重箱待还区域数据
            let zxDHList = []
            res.data.dh_box_list.map((v,i)=>{
                let zxItem = {}
                arrKey.map((vv,ii)=>{
                    if(ii == 0){
                        zxItem[vv] = '重箱待还保有量（箱）（客户提走未归还给园区的）'
                    }else if(ii == 1){
                        zxItem[vv] = v.box_type
                    }else if(ii < res.data.dept_list.length + 2){
                        zxItem[vv] = v['dept_' + (ii - 1)]
                    }else{
                        zxItem[vv] = ''
                    }
                })
                zxDHList.push(zxItem)
            })
            zxDHList.push(JSON.parse(JSON.stringify(itemObjs)))
            zxDHList[zxDHList.length - 1].value0 = '重箱待还保有量（箱）（客户提走未归还给园区的）'
            zxDHList[zxDHList.length - 1].value1 = '合计：' + dh_heji.value.dept_1
            // 重箱空箱区域数据
            let zxKXList = []
            res.data.dh_box_list.map((v,i)=>{
                let zxItem = {}
                arrKey.map((vv,ii)=>{
                    if(ii == 0){
                        zxItem[vv] = '空箱（箱）（存放在园区的空箱）'
                    }else if(ii == 1){
                        zxItem[vv] = v.box_type
                    }else if(ii < res.data.dept_list.length + 2){
                        zxItem[vv] = v['dept_' + (ii - 1)]
                    }else{
                        zxItem[vv] = ''
                    }
                })
                zxKXList.push(zxItem)
            })
            zxKXList.push(JSON.parse(JSON.stringify(itemObjs)))
            zxKXList[zxKXList.length - 1].value0 = '空箱（箱）（存放在园区的空箱）'
            zxKXList[zxKXList.length - 1].value1 = '合计：' + kx_heji.value.dept_1
            zxKXList.push(JSON.parse(JSON.stringify(itemObjs)))
            zxKXList[zxKXList.length - 1].value0 = '合计：' + ((zx_heji.value.dept_1 - 0) + (dh_heji.value.dept_1 - 0) + (kx_heji.value.dept_1 - 0))
            exportData.value = [...xiecheData,...shishiData,...zxDataList,...zxDHList,...zxKXList]
            exportColumn.value = exportColumns
            loading.value = false 
            
	    });
  }
  // 点击导出触发的函数
  const handleExports = ()=> {
        const instance = new ElMapExportTable(
          {
              column:exportColumn.value,
              data:exportData.value,
              spanMethod: ({ rowIndex, columnIndex }) => {
                  // rowIndex 纵   columnIndex   横  rowspan 纵向合并  colspan横向合并
                  return testFormData(rowIndex,columnIndex)
              },
              setRowStyle({ data, columnIndex, rowIndex, type }) {
              if (type === "main") {
                return {
                  height: 40,
                };
              }
            },
          },
          // {progress: progress => console.log(progress)}
        );
        instance.download("威斯腾专用线装卸作业报表");
  }
  // 下面是导出数据
  
  const testFormData = (rowIndex,columnIndex) =>{
    // 第一个空格  taizhangData.value.zyx_list.length    maxIndex.value
    if (rowIndex  === taizhangData.value.zyx_list.length && columnIndex === 0) {
        return {
            rowspan:1,
            colspan:maxIndex.value,
        };
    }
    // 库存标题
    if (rowIndex  === taizhangData.value.zyx_list.length + 1 && columnIndex === 0) {
        return {
            rowspan:1,
            colspan:taizhangData.value.type_list.length + 1,
        };
    }
    // 库存合计
    if (rowIndex  === taizhangData.value.zyx_list.length + 2 + taizhangData.value.zc_list.length && columnIndex === 1) {
        return {
            rowspan:1,
            colspan:taizhangData.value.type_list.length,
        };
    }
    // 第二个空白
    if (rowIndex  === taizhangData.value.zyx_list.length + 2 + taizhangData.value.zc_list.length + 1 && columnIndex === 0) {
        return {
            rowspan:1,
            colspan:maxIndex.value,
        };
    }
    // 场地箱标题
    if (rowIndex  === taizhangData.value.zyx_list.length + 2 + taizhangData.value.zc_list.length + 2 && columnIndex === 0) {
        return {
            rowspan:1,
            colspan:taizhangData.value.dept_list.length + 2,
        };
    }
    // 重箱
    if (rowIndex  === taizhangData.value.zyx_list.length + 2 + taizhangData.value.zc_list.length + 4  && columnIndex === 0) {
        return {
            rowspan:taizhangData.value.zx_box_list.length + 1,
            colspan:1,
        };
    }
    // 重箱合计
    if (rowIndex  === taizhangData.value.zyx_list.length + 2 + taizhangData.value.zc_list.length + 4 + taizhangData.value.zx_box_list.length  && columnIndex === 1) {
        return {
            rowspan:1,
            colspan:taizhangData.value.dept_list.length + 1,
        };
    }
    // 待还箱
    if (rowIndex  === taizhangData.value.zyx_list.length + 2 + taizhangData.value.zc_list.length + 4 + taizhangData.value.zx_box_list.length + 1  && columnIndex === 0) {
        return {
            rowspan:taizhangData.value.dh_box_list.length + 1,
            colspan:1,
        };
    }
    // 待还箱合计
    if (rowIndex  === taizhangData.value.zyx_list.length + 2 + taizhangData.value.zc_list.length + 4 + taizhangData.value.zx_box_list.length + 1 + taizhangData.value.dh_box_list.length  && columnIndex === 1) {
        return {
            rowspan:1,
            colspan:taizhangData.value.dept_list.length + 1,
        };
    }
    // 空箱
    if (rowIndex  === taizhangData.value.zyx_list.length + 2 + taizhangData.value.zc_list.length + 4 + taizhangData.value.zx_box_list.length + 1 + taizhangData.value.dh_box_list.length + 1 && columnIndex === 0) {
        return {
            rowspan:taizhangData.value.kx_box_list.length + 1,
            colspan:1,
        };
    }
    // 空箱合计
    if (rowIndex  === taizhangData.value.zyx_list.length + 2 + taizhangData.value.zc_list.length + 4 + taizhangData.value.zx_box_list.length + 1 + taizhangData.value.dh_box_list.length + 1 + taizhangData.value.kx_box_list.length  && columnIndex === 1) {
        return {
            rowspan:1,
            colspan:taizhangData.value.dept_list.length + 1,
        };
    }
    // 场地箱总合计
    if (rowIndex  === taizhangData.value.zyx_list.length + 2 + taizhangData.value.zc_list.length + 4 + taizhangData.value.zx_box_list.length + 1 + taizhangData.value.dh_box_list.length + 1 + taizhangData.value.kx_box_list.length + 1  && columnIndex === 0) {
        return {
            rowspan:1,
            colspan:taizhangData.value.dept_list.length + 2,
        };
    }
  }

const handleReport = ()=>{
    router.push('/ledger/ledger_report')
}

const handleExport = async(e,tab)=>{
    if(tab == 5){
        router.push('/ledger/ledger_report_detail')
    }
    
    
}

const onChange = (e)=>{
    let arr1 = e[0].split(' ')
    let arr2 = e[1].split(' ')
    range_dates.value = [arr1[0] + ' 00:00:00',arr2[0] + ' 23:59:59']
    handleExportData(range_dates.value)
}

</script>
<style>
.tableBox {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.4);
    scrollbar-width: none;
    cursor: pointer;
  }
  .tableBox::-webkit-scrollbar {
    display: none; /* 对于Chrome, Safari和Opera */
  }
  .tableBox div {
    box-sizing: border-box;
    text-align: center;
    min-height:30px;
    line-height:30px;
  }
  .scrollbar {
    scrollbar-width: none;
  }
  .scrollbar::-webkit-scrollbar {
    display: none; /* 对于Chrome, Safari和Opera */
  }
  .flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .height40 {
    min-height: 30px;
  }
  .bor_btm {
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  }
  .bor_top {
    border-top: 1px solid rgba(0, 0, 0, 0.4);
  }
  .bor_right {
    border-right: 1px solid rgba(0, 0, 0, 0.4);
  }
  .flex_1 {
    flex: 1;
  }
  .pad8 {
    padding: 4px;
  }
  .flex_column {
    flex-direction: column;
  }
</style>
<script>

export default { name: "ledger:ledger" };
</script>
